<template>
    <div class="errorpage" id="bgstar" ref="bgstar" @click="gotopage('guide')">
        <div class="dao">
            <van-circle 
            v-model="currentRate" 
            :rate="rate" 
            :speed="20" 
            :text="text" 
            layer-color="#ebedf0"
            :stroke-width="60"
            size="200px"
            color="#adf"
            />
        </div>
        <img :src="pic" class="myimg" alt="">
        <span v-for="(l,i) in spanNum" :key="i" class="spandot" 
        :style="{
          top:l.y,
          left:l.x,
          animationDelay:l.rate+'s',
          transform:'scale('+l.scaler+')',
          background:l.rgba,
        }"
      >

      </span>
    </div>
</template>

<script>
import pic from "../../../public/img/404.gif"
export default {
    data () {
        return {
            pic,
            spanNum:[],
            currentRate:0,
            rate:100
        }
    },
    computed: {
        text(){
            return "倒计时" + (5-Math.floor(this.currentRate/20))+'s'
        }
    },
    methods: {
        spanInit(){
      var width = document.getElementById("bgstar").clientWidth;
      var height = this.$refs.bgstar.clientHeight
      console.log(width,height)

      for(var i=0;i<220;i++){
        // 随机位置
        var x =  Math.floor(Math.random() * width)
        var y =  Math.floor(Math.random() * height)

        // 随机频率
        var rate = Math.random() * 1.2;

        // 随机大小
        var scaler=Math.random() * 8;

        // 随机颜色
        var r = Math.floor(Math.random() * 255)
        var g = Math.floor(Math.random() * 255)
        var b = Math.floor(Math.random() * 255)
        var a = Math.random() * 1;

        this.spanNum.push({
          x:x+'px',
          y:y+'px',
          rate,
          scaler,
          rgba:`rgba(${r},${g},${b},${a})`
        })
      }
    },
     gotopage(name){
          this.$router.push({name})
      }
    },
    watch: {
        currentRate(v){
            if(v==100){
                this.$router.push({name:'guide'})
            }
        }
    },
     mounted(){
    this.spanInit()
  }
}
</script>
<style lang="scss" scoped>
.errorpage{
    width: 100%;
    height: 100%;
    position: relative;
    // ::v-deep是样式穿透 在vue中有时样式层级太高就无法改变  就适合用这个来修改样式
    ::v-deep .van-circle__text{
        font-weight: 700;
    }
    .dao{
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .myimg{
        width: 270px;
        height: 270px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;

    }
    .spandot{
    position: absolute;
    z-index: 100;
    width: 4px;
    height:4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;

  }
   @keyframes flash {
        from{
            opacity: 0;
        }
        to{
            opacity: 0.5;
        }
    }
}

</style>